import React, { Component } from "react";

import Child from "./Child";

// 生命周期是只有类组件有

// PureComponent的作用是性能优化，当组件的数据没有发生改变的时候，不会重新渲染页面
// 可以完全取代shouldComponentUpdate
class App extends Component {
  // 初始化阶段
  // constructor特殊的函数，是在组件被实例化的时候调用，最先调用的，只会被调用一次
  constructor(props) {
    super(props);
    console.log("constructor");
    // props一般可以作为state的初始值
    // this.state = {
    //   count: props.count,
    // };
    // this.xxx = this.xxx.bind(this);
    this.state = {
      count: 3,
    };
  }

  // 挂载阶段
  // componentWillMount已经被废弃了，在16.3以后的版本使用的时候，前面要加UNSAFE_
  // 相当于vue的beforeMount
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
    // this.setState({
    //   count: 5,
    // });

    // 看似完全可以在这里做数据请求，但是最好是不能做的
    // 因为fiber的存在，有一定几率会让这里的请求执行多次浪费性能
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //   });
  }

  // render本身也是挂载阶段的生命周期，比较特殊，需要return一段jsx
  // render是渲染的意思
  render() {
    console.log("render");
    // 在render里面也不要做数据请求，也是因为fiber算法

    // 可以在这里做state和props的解构。
    // classnames的一些操作
    return (
      <>
        <h2>旧版生命周期</h2>
        <p>count: {this.state.count}</p>
        <Child count={this.state.count} />
      </>
    );
  }

  // 相当于vue的mounted
  componentDidMount() {
    // 只能在这里做数据请求
    // 几乎可以做任何事情了
    console.log("componentDidMount");
    setTimeout(() => {
      this.setState({
        count: 3,
      });
    }, 2000);
  }

  // 更新阶段
  // 组件是否要更新
  // shouldComponentUpdate必须要返回true或者false
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log("shouldComponentUpdate");
  //   // if (nextState.count === this.state.count) {
  //   //   return false;
  //   // } else {
  //   //   return true;
  //   // }
  //   return nextState.count !== this.state.count;
  // }

  // 更新前
  UNSAFE_componentWillUpdate() {
    console.log("componentWillUpdate");
  }
  // 更新后
  // 不要在componentDidUpdate去修改数据
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }

  // 卸载阶段
  componentWillUnmount() {
    console.log("componentWillUnmount");
    // 清除定时器，websocket，js事件监听，第三方插件
  }
}

export default App;
